<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        font-size: 28px;
      }
    </style>
  </head>

  <body>
    <div>测试ajax 界面</div>
    <button id="btnSend">发送请求</button>
    <button id="btnCancel">取消请求</button>
    <script>
      var xhrObj;
      function sendRequest() {
        xhrObj = new XMLHttpRequest();
        xhrObj.withCredentials = true;
        xhrObj.onreadystatechange = function () {
          console.log("onreadystatechange: status=", xhrObj.status, xhrObj.readyState, xhrObj);
          if (xhrObj.readyState == 4 && xhrObj.status == 200) {
            console.log(xhrObj.responseText);
          }
        };
        xhrObj.open("post", "http://127.0.0.1:3000/xhr", true);
        // xhrObj.setRequestHeader("headera","b");
        xhrObj.send();
      }

      btnSend.onclick = function () {
        sendRequest();
      };

      btnCancel.onclick = function () {
        xhrObj && xhrObj.abort();
      };
    </script>
  </body>
</html>
